import React, { useEffect, useRef, useState } from 'react';
import {  } from 'antd-mobile';
import {  
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';
import { useDispatch, useMappedState } from 'redux-react-hook';
import { actionChangeRoom, actionSay } from '../../action';
import './style.less';
import { rpx, typeTimer } from '../../utils';


export default function LoginRoom() {
  const dispatch = useDispatch();
  const mapState = React.useCallback((state) => {
    return {
      state,
      uiStore: state.uiStore,
    };
  }, []);
  const { state, uiStore } = useMappedState(mapState);

  const handleChangeRoom = () => {
    actionChangeRoom({}, state, dispatch);
    setTimeout(() => {
      window.dispatchEvent(
        new CustomEvent('weSay', {
          bubbles: true,
          detail: {
             data: {},
          },
        }),
      );
    }, 2000);
  }

  return (
    <div className="login-room-container"
      style={{
        left: uiStore.status === 'home' ? rpx(0) : rpx(-750),
      }}
    >
      <img 
        src="https://gw.alicdn.com/imgextra/i4/O1CN010yBYIx1azhkZ4clHO_!!6000000003401-0-tps-1125-2436.jpg"
        style={{
          width: rpx(750),
          height: rpx(1624),
        }}
      />

      <div 
        style={{
          position: 'absolute',
          // background: 'red',
          left: 0,
          right: 0,
          top: rpx(250),
          height: rpx(200),
          // opacity: 0.5,
        }}
        onClick={() => {
          handleChangeRoom();
        }}
      >

      </div>
    </div>
  );
}
